<!DOCTYPE html>

<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        * {

            margin: 0;
        }

        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #tabtop {
            line-height: 31px;
            background: url("/admin/templates/images/map_top_bg.png") repeat;
            font-size: 12px;
            color: #343434;
        }

        #tabtop span {
            float: left;
            line-height: 31px;
            display: block;
        }

        #tabtop span.dob {
            padding-left: 7px;
        }

        #tabtop span.dob a {
            background: url("/admin/templates/images/yuncheng_a.png") no-repeat left center;
        }

        #tabtop span.dob a.ok {
            color: #3a3;
        }

        #tabtop span.dob a.on {
            color: #ef4f4f;
        }

        #tabtop span a {
            padding: 0 16px 0 8px;
            color: #343434;
            text-decoration: none;
        }

        #tabtop span.bd a {
            border-right: 1px solid #ccc;
            padding: 0 12px;
        }

        .position {
            vertical-align: text-bottom;
            margin-right: 5px;
            width: 9px;
        }

        .warring {
            color: #f00;
            padding: 0 12px;
            font-weight: bold;
        }

        .warring i {
            font-style: normal;
            float: left;
        }

        #tabtop span.warring a {
            color: #f00;
            display: block;
            float: left;
        }

        #allmap {
            float: left;

        }

        #right {
            float: right;
            background: #EFEFEF;
            height: 100%;
        }

        .dataTable {

            width: 100%;
            margin: 0 0 0 0;

        }

        .dataTable td {
            text-align: left;
        }

        .dataTable .firstCell {
            padding-left: 25px;
        }

        .tdare {
            padding: 5px;
            overflow: auto;
        }

        .tdare a {
            padding: 5px;
            color: #000;
            text-decoration: none;
        }

        .tdare td {

        }

        .tdare th a, .tdare td a {
            color: #3a7cae;
        }

        .tdare th a:hover, .tdare td a:hover {
            color: #3a7cae;
        }

        .tatr2 a {
            text-decoration: none;
        }

        .tatr2 td {
            border-bottom: 1px solid #ccc;
        }

        .anchorBL {
            display: none;
        }

        .formbtn {
            background: #e2e3e5;
            border: 1px solid #ccc;
            font-weight: bold;
            height: 28px;

            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            color: #666;
            cursor: pointer;
        }

        .tdare a {
            /*  border-bottom: 1px solid #999;*/
            display: block;
        }

        #right {
            width: 270px;
        }

    </style>


    <script type="text/javascript">
        //<!CDATA[
        var SITE_URL = "{$site_url}";
        var REAL_SITE_URL = "{$real_site_url}";
        var REAL_BACKEND_URL = "{$real_backend_url}";
        //]]>
    </script>
    <script src="http://webapi.amap.com/maps?v=1.3&key=78634dd0056201e14a509d5765eb7ce6"></script>
    <script type="text/javascript" src="{lib file=jquery.js}" charset="utf-8"></script>
    <title>车辆轨迹 </title>
</head>

<body class="page">

<div id="allmap"></div>


<div id="right">
    <div class="mrightTop">
        <div class="fontl">
            <img src="templates/style/seach1.png" style=" position:absolute; right:18px;top:13px;" onclick="seach1()">
            <div style=" padding-top: 6px;padding-left: 6px;display: none" class="left" id="left">
                <input class="queryInput" type="text" id="newquery" placeholder="车牌号/司机名字" name="newquery"
                       value="{$smarty.get.newquery}"/>


                <input type="button" onClick="query()" class="formbtn" value="{$lang.query}"/>
            </div>
        </div>
        <div class="fontr">{include file=page.top.html}</div>
        <div class="clear:both;"></div>
    </div>


    <div class="tdare">
        <table width="100%" cellspacing="0" class="dataTable" id="dataTable">

            <tr class="no_data">
                <td colspan="7">{$lang.no_data}</td>
            </tr>
        </table>

    </div>
</div>

<div id="hh" onclick="hide()" style="float: right;width: 15px;font-size: 14px;color:#3a7cae;margin-top: 23%"><img
        src="templates/style/images/show.png"></div>

</body>
</html>

<script type="text/javascript">


    function ispoint(h_lng, h_lat) {
        if (h_lng != undefined && h_lng != null && h_lng != "" && h_lng != "0" && h_lat != undefined && h_lat != null && h_lat != "" && h_lat != "0" && parseInt(h_lng) > 0 && parseInt(h_lat) > 0) {
            return true;
        }
        return false;
    }

    PI = 3.14159265358979324;
    x_pi = 3.14159265358979324 * 3000.0 / 180.0;




    function transformLat(x, y) {
        var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
        ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0;
        ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0;
        return ret;
    }


    function transformLon(x, y) {
        var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
        ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0;
        ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0;
        return ret;
    }

    function delta(lat,lon) {
        var a = 6378245.0; //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
        var ee = 0.00669342162296594323; //  ee: 椭球的偏心率。
        var dLat = this.transformLat(lon - 105.0, lat - 35.0);
        var dLon = this.transformLon(lon - 105.0, lat - 35.0);
        var radLat = lat / 180.0 * this.PI;
        var magic = Math.sin(radLat);
        magic = 1 - ee * magic * magic;
        var sqrtMagic = Math.sqrt(magic);
        dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);
        dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);
        return {'lat': dLat, 'lon': dLon};
    }
    function gcj_encrypt(gcjLon, gcjLat) {
        var d = delta(gcjLat, gcjLon);
        return new AMap.LngLat(parseFloat(gcjLon) + parseFloat(d.lon), parseFloat(gcjLat) + parseFloat(d.lat))
    }
    var EARTH_RADIUS = 6378137.0; //单位M
    var PI = Math.PI;

    function getRad(d) {
        return d * PI / 180.0;
    }

    /**
     * approx distance between two points on earth ellipsoid
     * @param {Object} lat1
     * @param {Object} lng1
     * @param {Object} lat2
     * @param {Object} lng2
     */
    function getFlatternDistance(lat1, lng1, lat2, lng2) {
        var f = getRad((lat1 + lat2) / 2);
        var g = getRad((lat1 - lat2) / 2);
        var l = getRad((lng1 - lng2) / 2);

        var sg = Math.sin(g);
        var sl = Math.sin(l);
        var sf = Math.sin(f);

        var s, c, w, r, d, h1, h2;
        var a = EARTH_RADIUS;
        var fl = 1 / 298.257;

        sg = sg * sg;
        sl = sl * sl;
        sf = sf * sf;

        s = sg * (1 - sl) + (1 - sf) * sl;
        c = (1 - sg) * (1 - sl) + sf * sl;

        w = Math.atan(Math.sqrt(s / c));
        r = Math.sqrt(s * c) / w;
        d = 2 * w * a;
        h1 = (3 * r - 1) / 2 / c;
        h2 = (3 * r + 1) / 2 / s;

        return d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg));
    }


    var map;
    function initMap() {
        map = new AMap.Map("allmap", {
            resizeEnable: true,
            zoom: 12
        });
        map.plugin(["AMap.Scale"], function () {
            var scale = new AMap.Scale();
            map.addControl(scale);
        });
        map.plugin(["AMap.ToolBar"], function () {
            map.addControl(new AMap.ToolBar());
        });
        var trafficLayer = new AMap.TileLayer.Traffic({zIndex: 10}); //实时路况图层
        trafficLayer.setMap(map);   //添加实时路况图层

    }
    function mapcenter(lng, lat) {

        map.clearInfoWindow();
        map.setZoomAndCenter(17, new AMap.LngLat(lng, lat));
    }
    function mapcenterbd(lng, lat) {
        //百度转高德
        gdpoint = gcj_encrypt(lng, lat);
        map.clearInfoWindow();
        map.setCenter(new AMap.LngLat(gdpoint.lng, gdpoint.lat));
    }

    //    var level = 15;
    //    map.addEventListener("zoomend", function () {
    //        level = map.getZoom();
    //    });

    //    map.enableScrollWheelZoom();
    //    map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));// 左上角，添加比例尺
    //    map.addControl(new BMap.NavigationControl());  //左上角，添加默认缩放平移控件
    //

    //车辆标志
    var vmapcar = null;
    var vexception = [];
    var newindex;
    function gpstobd(Lng, Lat) {
        return {'lat': Lat, 'lon': Lng};
    }

    setTimeout(function () {
        //    map.centerAndZoom(new BMap.Point(edata.lng, edata.lat), level);
        //     mapcenter(edata.lng,edata.lat);
    }, 1000);

    function carselected(lng, lat) {
        if (lng == "" || lat == '') {
            return;
        }
        if (lng != null && lng != "") {

            var l = gcj_encrypt(lng, lat);

            lng = l.lng;

            lat = l.lat;

        }
        mapcenter(lng, lat);
//        var point = new BMap.Point(lng, lat);  // 创建点坐标
//        map.centerAndZoom(point, level);
    }
    function railselect(lng, lat) {
        if (lng == "" || lat == '') {
            return;
        }
        if (lng != null && lng != "") {
            var l = gcj_encrypt(lng, lat);
            lng = l.lng;
            lat = l.lat;
        }
        mapcenter(lng, lat);
    }
    function query() {
        winresize();
        initMap();

        //车辆标志
        var vmapcar = null;

        var vexception = [];
        var newindex;
        var data = {$car};

        var newquery = $("#newquery").val();
        var i = 0;
        $.ajax({
            type: "post",
            url: "index.php?app=car_monitor&act=ajax_car",
            data: {newquery: newquery},
            dataType: "json",
            success: function (data) {
                if (data == '') {
                    $("#dataTable").children('tbody').children('tr').remove();
                } else {
                    $("#dataTable").children('tbody').children('tr').remove();
                    $.each(data, function (idx, obj) {
                        var rail_lng;
                        var rail_lat;
                        if (obj.lng != null && obj.lng != "") {
                            rail_lng = obj.lng;
                            rail_lat = obj.lat;
                            var l = gcj_encrypt(obj.lng, obj.lat);
                            obj.lng = l.lng;
                            obj.lat = l.lat;
                        }
                        if (obj.car == '') {
                            $("#dataTable").children('tbody').append('<tr style="color: #000;" class="tatr2"><td> <a href="javascript:void(0);" style="color: #000;font-weight:bold;" onclick="railselect(' + rail_lng + ',' + rail_lat + ')">' + obj.name + '(' + obj.car.length + ')' + '<img src="templates/style/down.png">' + '</a></td></tr>');

                        }
                        else {
                            $("#dataTable").children('tbody').append('<tr style="color: #000;" class="tatr2"><td> <a href="javascript:void(0);" style="color: #000;font-weight:bold;" onclick="railselect(' + rail_lng + ',' + rail_lat + ')">' + obj.name + '(' + obj.car.length + ')' + '<img src="templates/style/up.png">' + '</a></td></tr>');


                        }


// var oval = new BMap.Polygon(add_oval(point,0.1,0.3), {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
//                        map.addOverlay(oval);
//                        var point = new BMap.Point(obj.lng, obj.lat);
                        var circle = new AMap.Circle({
                            fillOpacity: 0.1,
                            fillColor: "#00ff00",
                            strokeColor: "#00ff00",
                            strokeOpacity: 0.8,
                            strokeWeight: 1,
                            center: new AMap.LngLat(obj.lng, obj.lat),
                            radius: obj.offset,

                        });
                        circle.setMap(map);
//                        circle.setFillColor("#A6CBA1"); //填充颜色
//                        circle.setStrokeColor("#A6CBA1"); //边线颜色
//                        map.addOverlay(circle);

                        $.each(obj.car, function (idx, obj) {

                            var lng1;
                            var lat1;

                            if (obj.lng != null && obj.lng != "") {
                                lng1 = obj.lng;
                                lat1 = obj.lat;
                                var l = gcj_encrypt(obj.lng, obj.lat);
                                obj.lng = l.lng;
                                obj.lat = l.lat;
                            }

                            if (obj.lng == "") {

                                $("#dataTable").children('tbody').append(
                                        '	<tr style="color: #3a7cae;" class="tatr2"><td> <a href="javascript:void(0);" onclick="carselected(' + lng1 + ',' + lat1 + ')" style="color:#ccc;">' + obj.a_vhc_code
                                        + (obj.a_username.length > 0 ? ('/ ' + obj.a_username) : '') + (obj.status ? '<img src="templates/style/NEW.png">' : '') +
                                        (obj.gps_wmtid != "0" ? '</br>当前运单：' + obj.wm_code + '' : '') + '</a></td></tr>'
                                );

                            } else {
                                $("#dataTable").children('tbody').append(
                                        '	<tr  class="tatr2">' +
                                        '<td> '
                                        + '<a href="javascript:void(0);"'
                                        + (obj.status ? 'style="color:#ff0000"' : '')
                                        + ' onclick="carselected(' + lng1 + ',' + lat1 + ')">'
                                        + '<span style="margin-left: -7px;"><span style="font-weight:bold;">丨</span>' + obj.a_vhc_code
                                        + (obj.a_username.length > 0 ? ('/ ' + obj.a_username) : '')
                                        + (obj.status ? '<img src="templates/style/NEW.png">' : '</span>')
                                        + (obj.gps_railId != "0" ? '</br><span style="color: #000;margin-left: 9px">停留时间：' + obj.gps_inraildate + '' : '</span>')
                                        + (obj.gps_wmtid != "0" && obj.wm_awb_code!="" ? '</br><span style="color: #000;margin-left: 9px"><a href="index.php?app=map&carid=&code=' + obj.gps_wmtid + '&id=' + obj.gps_wmtid + '" target="_blank" style="color: #000;margin-top:-20px;font-size: 12px" >' + obj.wm_awb_code + '</a></span>' : '</span>')
                                        + (obj.gps_wmtid != "0" && obj.wm_awb_code=="" ? '</br><span style="color: #000;margin-left: 9px"><a href="index.php?app=map&carid=&code=' + obj.gps_wmtid + '&id=' + obj.gps_wmtid + '" target="_blank" style="color: #000;margin-top:-20px;" >' + obj.wm_code + '</a>' : '</span>')

                                        + '</a></td></tr>'
                                );
                                var vmapcar = new AMap.Marker(
                                        {
                                            position: new AMap.LngLat(obj.lng, obj.lat),
                                            icon: new AMap.Icon({
                                                size: new AMap.Size(15, 32),
                                                image: "../images/car.png"
                                            }),
                                            label: {
                                                content: obj.a_vhc_code + ' ' + obj.a_username + ' 速度' + obj.speed + '<br>时间' + obj.time,
                                                offset: {x: 20, y: 0}
                                            }
                                            //  rotation: obj.direction
                                        });  // 创建标注
                                vmapcar.setMap(map);            // 将标注添加到地图中
                                if (i < 1) {
                                    mapcenter(obj.lng, obj.lat);
                                }
                                i++;
                            }
                        });
                    });
                }

            }
        });
    }
    function winresize() {
        $("#allmap").height($(window).height() - $("#tabtop").height());
        $("#allmap").width($(window).width() - $("#right").width() - 20);
        $(".tdare").height($(window).height() - $("#tabtop").height() - 50);
    }
    function seach1() {
        $div1 = $('div[id=left]');
        if ($div1.is(':hidden')) {

            $div1.show();
        } else if ($div1.is(':visible')) {
            $div1.hide();
        }
    }
    function hide() {
        if ($("#right").css("display") == "block") {
            $("#right").css("display", "none");
            $("#hh").html('<img src="templates/style/images/hide.png">');
//            $("#allmap").height($(window).height() - $("#tabtop").height());
//            $("#allmap").width($(window).width() - 23);
            $(".tdare").height($(window).height() - $("#tabtop").height() - 50);
            $("#right").width(0);

        } else {
            $("#right").css("display", "block");
            $("#hh").html('<img src="templates/style/images/show.png">');
//            $("#allmap").height($(window).height() - $("#tabtop").height());
            $("#allmap").width(887.9);
            $(".tdare").height($(window).height() - $("#tabtop").height() - 50);
            $("#right").width(270);

        }
        query();
    }
    $(function () {
        try {
            setInterval("query()", 300000);  //5分钟
            query();
            $(window).resize(function () {
                query();
            });
        }
        catch (e) {
            console.log(e);
        }
    });
</script>

      